<form [formGroup]="form" (ngSubmit)="save()" autocomplete="off">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title" i18n>Edit Profile</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
    </button>
  </div>
  <div class="modal-body">
    <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error?.email"></pngx-input-text>
    <div ngbAccordion>
      <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm" class="border-0 bg-transparent">
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="p-0 pb-3">
            <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" autocomplete="email" [error]="error?.email_confirm"></pngx-input-text>
          </div>
        </div>
      </div>
    </div>
    <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" autocomplete="current-password" [error]="error?.password"></pngx-input-password>
    <div ngbAccordion>
      <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="p-0 pb-3">
            <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" autocomplete="new-password" [error]="error?.password_confirm"></pngx-input-password>
          </div>
        </div>
      </div>
    </div>
    <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
    <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
    <div class="mb-3">
      <label class="form-label" i18n>API Auth Token</label>
      <div class="position-relative">
        <div class="input-group">
          <input type="text" class="form-control" formControlName="auth_token" readonly>
          <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
              @if (!copied) {
                <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
              }
              @if (copied) {
                <i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
              }
              <span class="visually-hidden" i18n>Copy</span>
            </button>
            <button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token">
              <i-bs width="1.2em" height="1.2em" name="arrow-repeat"></i-bs>
            </button>
          </div>
          <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
        </div>
        <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the token cannot be undone</div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive || saveDisabled">Save</button>
    </div>
  </form>
